<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS盒模型</title>
    <style media="screen">
        .box{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="box" id="box">111</div>
    <script>
        let dom = document.getElementById('box');
        //1.dom.style.width/height
        console.log( dom.style.width)//获取不到
        //2. dom.currentStyle.width/height --->只支持ie
        console.log( dom.currentStyle.width);  //100px
        //3.window.getComputedStyle(dom).width/height -->多数浏览器+IE9以上
        console.log(window.getComputedStyle(dom).width);//100px
        //4.dom.getBoundingClientRect().width/height
        console.log(dom.getBoundingClientRect().width);
    </script>
</body>
</html>
